/* 
less的注释要用现在这种方式包裹，用//注释，在这里可以，但是在css中不用生效，不自动转到css
less，要安装一个easy-less插件，less文件，保存后，就自动编译成css文件
*/
// 变量
@link-color: #428bca; // 定义一个颜色变量
@link-hover-color: darken(@link-color, 10%); // 使用函数对变量进行操作

a {
  color: @link-color; // 使用变量
  &:hover {
    color: @link-hover-color; // 使用嵌套和变量
  }
}

/* 嵌套
*/
nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    li { display: inline-block; }
    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
      &:hover { background-color: #eee; }
    }
  }

  /*
  混合.bordered() 加不加（）都可以，是可选的*/
  .bordered {
    border: 1px solid black;
  }
  
  .box {
   .bordered;
    width: 200px;
    height: 200px;
  }

  .bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
  }
  
  #menu a {
    color: #111;
    .bordered(); // 使用混合
  }
  
  .post a {
    color: red;
    .bordered(); // 重复使用混合
  }
  
  
